import React from "react"
import Child from "./Child"

//不安全的钩子函数=>18.x将移除

//componentWillMount

//componentWillReceiveProps

//componentWillUpdate 

//新增的钩子函数

//static getDerivedStagteFromProps

//getSnapShotBeforeUpdate

//在组件方法中调用this.forceUpdate一样会进行强制更新

class LifeCircle extends React.Component {
    state = {
        msg: "九九女儿红"
    }
    handleClick = () => {
        this.setState({
            msg: "大头皮鞋"
        })
    }

    //新的钩子函数

    static getDerivedStateFromProps() {
        console.log('新的钩子函数 getDerivedStateFromProps');
        return null
    }

    //组件初始化会执行的钩子函数

    // componentWillMount() { //组件即将挂载
    //     //组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。异步请求不要在此钩子中发起,容易造成无限更新
    //     console.group('LifeCircle的componentWillMount')
    //     console.log(this.state)
    //     console.groupEnd()
    // }
    shouldComponentUpdate(nextProps, nextState) {
        //对比新旧两个state 如果不一致 那么就更新
        //如果一直就不更新
        //旧的msg
        let oldMsg = this.state.msg
        //新的msg
        let newMsg = nextState.msg
        if (oldMsg === newMsg) {
            return false
        }
        return true
    }

    render() {//渲染
        //react最重要的步骤，创建虚拟dom，进行diff算法，更新Vdom树都在此进行。此时就不能更改state了。
        console.group('LifeCircle的render')
        // console.log(this.state)
        console.groupEnd()
        return (
            <fieldset>
                <legend>生命周期</legend>
                <h1>{this.state.msg}</h1>
                <button onClick={this.handleClick}>点击</button>
                <Child msg={this.state.msg} />
            </fieldset>
        )
    }

    componentDidMount() {//组件挂载完成
        //组件渲染之后调用，只调用一次。
        console.group('LifeCircle的componentDidMount')
        console.log(this.state)
        console.groupEnd()
    }

    //更新的钩子函数
    // componentWillUpdate(nextProps, nextState) {
    //     //组件初始化时不调用，只有在组件将要更新时才调用，此时不可以修改state
    //     //组件即将更新
    //     console.group('LifeCircle的componentWillUpdate')
    //     // console.log(this.state)
    //     console.log('nextState====', nextState)
    //     console.log('nextProps====', nextProps)
    //     console.groupEnd()
    // }
    componentDidUpdate() {
        //组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
        //组件更新完成
        console.group('LifeCircle的componentDidUpdate')
        console.log(this.state)
        console.groupEnd()
    }
}

export default LifeCircle